<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1. id, 2.tag name 3. class */
        /* tag name:  p,h,a */  
        /* id:  getElementByID, # */
        /* class:  getElementByClassName, . */                       
        /* #first {
            color:red;font-size:12px;
        }
        .second {
            color:rgb(0, 255, 157);font-size:12px;
        } */
        /* * {
            color:red;font-size:12px;
        } */
        /* 使用, 所有组合选中所有元素 */
        /* h1,span {
            color:red;font-size:14px;
        } */
        /* 子选择器 */
        /* h1>span {
            color:red;font-size:14px;
        } */
        /* 包含选择器 */
        /* #h1first span {
            color:red;font-size:14px;
        } */
        /* 兄弟选择器 */
        /* #h1first~span {
            color:red;font-size:14px;
        } */
        /* 相邻选择器 */
        /* #h1first+span {
            color:red;font-size:14px;
        } */
        /* 伪类选择器 */
        /* span:last-child {
            color:red;font-size:14px;
        } */
        /* 伪类选择器:hover */
        /* h1>span:hover {
            color:red;font-size:3em;

        } */
        /* .enjoy-css {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 150px;
  height: 100px;
  border: 4px dotted rgba(0,150,255,0.91);
  -webkit-border-radius: 50px;
  border-radius: 50px;
  font: normal 14px/1 "Times New Roman", Times, serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
} */
    #overflowTest {
        background: #4CAF50;
        color: white;
        padding: 15px;
        width: 80%;
        height: 100px;
        /* overflow: scroll; */
        border: 1px solid rgb(150, 18, 18);
    }
    </style>
</head>
<body>
    <!-- <p id="first">这边显示该章节的内容……</p>
    <p class="second">内容2</p>
    <p>内容3</p>
    <span> h2 </span> -->
    <!-- 子选择器, 只能选择直系 -->
    <!-- <h1 style="height: 295px;margin-block-start: 0em;margin-block-end: 0em;">
        H1
        <span id="h1first"> 
            <h5>5</h5>
            h21 
        </span>
        <span> h22 </span>
        <span> h33 </span>
        <div>
            <span> div span</span>
        </div>
    </h1>

    <div style="background-color: grey; width: 80vw; height: calc(100vh - 315px);"> -->
        <!-- <div class="navbar">
            <div style="height: 40px;">
                logo
            </div>
            <div style="height: 40px;">
                system1 system2 system3
            </div>
            <div style="height: 40px;">
                person
            </div>
            <div style="height: 40px;">
                person
            </div>
        </div>
    </div> -->

    <div id="overflowTest">
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
        <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    </div>
</body>
</html>